<template>
  <div class="recharge-container">
    <van-nav-bar 
      title="充值记录" 
      left-text="返回" 
      left-arrow 
      @click-left="onClickLeft"
      class="custom-nav"
    />

    <div class="orders-container" v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading || finished" infinite-scroll-distance="10">
      <div v-for="order in rechargeOrderTable" :key="order.orderNo" class="order-card">
        <div class="order-header">
          <span class="order-no">订单号: {{order.orderNo}}</span>
          <el-tag 
            :type="order.status === 0 ? 'primary' : 'success'"
            class="status-tag"
          >
            {{order.status === 0 ? '未付款' : '已付款'}}
          </el-tag>
        </div>

        <div class="order-content">
          <div class="amount">
            <span class="label">支付金额</span>
            <span class="value">￥{{order.total}}</span>
          </div>
          
          <div class="time-info">
            <div class="create-time">
              <span class="label">创建时间</span>
              <span>{{order.createTime}}</span>
            </div>
            <div class="pay-time" v-if="order.status === 1">
              <span class="label">支付时间</span>
              <span>{{order.payTime}}</span>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <el-button 
            v-if="order.status === 0"
            type="primary" 
            class="pay-button"
            @click="pay(order)"
          >
            立即支付
          </el-button>
          <el-button 
            v-else 
            type="info" 
            plain 
            disabled 
            class="paid-button"
          >
            已完成支付
          </el-button>
        </div>
      </div>
      
      <div class="loading-status">
        <p v-if="loading" class="loading-text">加载中...</p>
        <p v-if="finished" class="finished-text">没有更多了</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import {rechargeOrderList} from "@/api/pay";
import {ElMessage} from "element-plus";
import {ref} from "vue";


const rechargeOrderTable = ref([]);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const finished = ref(false);

const onClickLeft = () => history.back();

async function showOrderList() {
  if (loading.value || finished.value) return;
  
  loading.value = true;
  try {
    const res = await rechargeOrderList({
      page: page.value,
      pageSize: pageSize.value
    });
    
    if (res.data.code === 200000) {
      const newData = res.data.data;
      if (page.value === 1) {
        rechargeOrderTable.value = newData;
      } else {
        rechargeOrderTable.value = [...rechargeOrderTable.value, ...newData];
      }
      
      if (newData.length < pageSize.value) {
        finished.value = true;
      }
      page.value++;
    } else {
      ElMessage.error(res.data.errorMessage);
    }
  } catch (error) {
    ElMessage.error('加载失败');
  } finally {
    loading.value = false;
  }
}

const loadMore = () => {
  showOrderList();
};

// 初始加载
showOrderList();

function pay(row){
  window.open("http://localhost:9040/auth/aliPay/pay?orderNo=" + row.orderNo)
}
</script>


<style scoped>
.recharge-container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.custom-nav {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.orders-container {
  padding: 16px;
  max-height: calc(100vh - 46px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.order-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.order-no {
  color: #606266;
  font-size: 14px;
}

.status-tag {
  font-size: 12px;
}

.order-content {
  padding: 10px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.amount {
  margin-bottom: 16px;
}

.amount .value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-left: 8px;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #909399;
  font-size: 13px;
}

.label {
  color: #909399;
  margin-right: 8px;
}

.order-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.pay-button {
  width: 120px;
}

.paid-button {
  width: 120px;
}

.loading-status {
  text-align: center;
  padding: 16px 0;
}

.loading-text,
.finished-text {
  color: #909399;
  font-size: 14px;
  margin: 0;
}
</style>